<template>
  <div id="operLogisticsCompany" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/logisticsCompany">物流公司管理</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="showAdd"><i class="fa fa-plus"></i><span>添加</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
			<Form>
        <Row :gutter="16">
  				<Col :md="24">
            <FormItem>
		          <Input placeholder="请输入机构名称关键字" v-model="sOrgName"></Input>
            </FormItem>
  				</Col>
  			</Row>
			</Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>机构</th>
						<th>登录名</th>
						<th>联系人</th>
						<th>联系电话</th>
						<th>状态</th>
						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.thisPageElements" :key="`org-list-key-${i}`">
							<td>{{v.orgName}}</td>
							<td>{{v.loginName}}</td>
							<td>{{v.contactor}}</td>
							<td>{{v.contactPhone}}</td>
							<td>{{v.enable===1?'启用':'禁用'}}</td>
							<td class="operate">
								<a @click="doResetPassword(v)">重置密码</a>
								<!--<a @click="doDisable(v)">禁用</a>-->
								<a @click="doDelete(v)">删除</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="6">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

      <Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <Modal v-model="modal.show" :title="modal.title" width="500">
      <Form :label-width="80" :model="form" ref="form" :rules="rules">
        <FormItem label="物流公司名称" prop="orgName">
        	<Input v-model="form.orgName" placeholder="请输入物流公司名称" :maxlength="20"></Input>
   			</FormItem>
        <FormItem label="登录名" prop="loginName">
        	<Input v-model="form.loginName" placeholder="请输入登陆名" :maxlength="20"></Input>
          <span class="form-item-tip">默认密码为：登陆名+888</span>
   			</FormItem>
        <FormItem label="联系人" prop="contactor">
        	<Input v-model="form.contactor" placeholder="请输入联系人" :maxlength="20"></Input>
   			</FormItem>
        <FormItem label="联系电话" prop="contactPhone">
        	<Input v-model="form.contactPhone" placeholder="请输入联系电话" :maxlength="20"></Input>
   			</FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="colseModal">取消</Button>
        <Button type="primary" :loading="isModalLoading" @click="submit">保存</Button>
      </div>
    </Modal>

  </div>
</template>
<style lang="less" scoped>
  .form-item-tip{display: block;line-height: 1.5;color: #999999;}
</style>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import {post} from '@/util/request'

  export default {
    data(){
      return {
        current:1,
        sOrgName:'',
        isModalLoading:false,

        modal:{
          show:false,
          title:'新增物流公司'
        },
        form:{enable:1},
        submitForm:{},
        rules:{
          orgName:{required:true, message:'物流公司名称必填', trigger:'blur'},
          loginName:{required:true, message:'登录名必填', trigger:'blur'},
          contactor:{required:true, message:'联系人必填', trigger:'blur'},
          contactPhone:{required:true, pattern:/^1[3|4|5|7|8][0-9]{9}$/,message:'必须是有效手机号码',trigger:'blur'}
        }
      };
    },
    computed:{
      ...mapState('operation/operLogisticsCompany',['pageData','isLoading']),
      empopts(){
        return {isedit:this.modalIsEdit,title:this.modalTitle};
      }
    },
    methods:{
      moment,
      ...mapActions('operation/operLogisticsCompany',['reload','resetPassword','disableOrg','deleteOrg']),
      search(){
        this.submitForm = {orgName:this.sOrgName};
        this.loadPage(1);
      },
      loadPage(e){
        this.current = e;
        this.reload({pageNum:this.current,...this.submitForm});
      },
      colseModal(){
        this.$refs.form.resetFields();
        this.modal.show = false;
      },
      showAdd(){
        this.modal.title = '新增物流公司';
        this.modal.show = true;
      },
      async submit(){
        let v = await this.$refs.form.validate();
        if (v){
          this.submitAdd();
        }
      },
      async submitAdd(){
        this.isModalLoading = true;
  			let res = await post("/auth/serviceOrg/save",this.form);
        this.isModalLoading = false;
        if (res.data.success){
          this.$Message.success('保存成功');
          this.colseModal();
        }else{
          this.$Message.error(res.data.msg);
        }
        this.loadPage(1);
      },
      onAdd(){
        this.loadPage(1);
      },
      doResetPassword(v){
        this.$Modal.confirm({
          title: '重置密码',
          content: `是否将物流公司“${v.orgName}”的密码重置为“用户名+888”？`,
          loading: true,
          onOk:async ()=>{
          	let res = await this.resetPassword({loginId:v.id,loginName:v.loginName});
          	if(res.success){
          		this.$Modal.remove();
          		this.$Message.success('重置密码成功');
						}else{
							this.$Modal.remove();
							this.$Message.error(res.msg);
						}
          }
        });
      },
      doDisable(v){
        let str = v.enable === 1 ? '禁用':'启用';
        this.$Modal.confirm({
          title: `${str}物流公司`,
          content: `是否将物流公司“${v.orgName}”${str}？`,
          loading: true,
          onOk:async ()=>{
          	let res = await this.disableOrg({id:v.id});
          	if(res.success){
          		this.$Modal.remove();
              this.deleteLoadPage();
          		this.$Message.success('操作成功');
						}else{
							this.$Modal.remove();
							this.$Message.error(res.msg);
						}
          }
        });
      },
      deleteLoadPage(){
				let total = this.pageData.totalNumberOfElements - 1;
				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
				if (this.current > 1 && this.current > pageSize) {
					this.current--;
				}
				this.loadPage(this.current);
			},
      doDelete(v){
        this.$Modal.confirm({
          title: '删除物流公司',
          content: `是否将账户“${v.orgName}”删除？`,
          loading: true,
          onOk:async ()=>{
            let res = await this.deleteOrg({id:v.id});
            if(res.success){
              this.$Modal.remove();
              this.loadPage(this.current);
              this.$Message.success('删除成功');
            }else{
              this.$Modal.remove();
              this.$Message.error(res.msg);
            }
          }
        });
      }
    }
  };
</script>
